<!-- 二维分析图 -->
<template>
  <div>
    <div id="technologyFrontier" class="chart"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import Ecolors from "@/utils/chartColors";
import { resize, spaceTxt } from "@/utils/utils";
// import tablePaperVue from "../../TecAnalysis/tablePaper.vue";
// import { number } from "echarts";
export default {
  mixins: [resize],
  props: {
    chartData: {},
    termsChartData: [],
    size: Number,
    checkList: [],
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
      doc_count: [],
      cloumns: [],
      datas: [],
      _datas: [], // 存储临时数据
    };
  },
  computed: {
    ...mapState(["curChartConfig"]),
  },
  watch: {
    termsChartData: {
      deep: true,
      handler() {
        this.handleData();
      }
    },
    size: {
      handler(nv) {
        this.init();
      },
    },
    checkList(nv) {
      // console.log(123, nv);
      this.handleData();
    },
  },
  mounted() {
    this.chart = this.$echarts.init(
      document.getElementById("technologyFrontier")
    );
    this.init();
    this.$Bus.$on("changeTFrontier", (val) => {
      // console.log("-----");
      this.draw(this.datas, val);
    });
  },
  methods: {
    init() {
      this.handleData();
    },
    handleData() {
      let termStaticData = this.termsChartData;
      let chartData = this.chartData[0].data;
      // console.log(111, this.chartData)
      let result = this.crossFIled(chartData, termStaticData);
      this.datas = result[0];
      // this._datas = result[0];
      this.cloumns = result[3];
      // console.log("result", result);
      // console.log("this.cloumns", this.cloumns);
      this.draw(this.datas, this.cloumns);
    },
    draw(datas, cloumns) {
      // console.log(47, datas)
      let currentThemeColor = "#333";
      let currentTooltipColor = "#fff";
      let colors = ["#333", "#666", "777"];
      let option = {
        tooltip: {
          show: true,
          formatter: function(params) {
            return "交叉论文量：" + params.data[2];
          },
          backgroundColor: currentTooltipColor,
          textStyle: {
            color: currentThemeColor, // tooltip文本颜色
          },
        },
        color: colors,
        grid: {
          left: 10,
          right: 10,
          bottom: 10,
          containLabel: true,
        },
        // toolbox: optionMap["toolbox"],
        animation: false,
        xAxis: {
          type: "category",
          data: cloumns,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: currentThemeColor, //左边线的颜色
              width: "2", //坐标线的宽度
              // type: 'solid',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 30, //-30度角倾斜显示
            color: currentThemeColor,
          },
          z: 10,
          rotate: -10,
        },
        yAxis: {
          type: "category",
          data: cloumns,
          axisTick: {
            show: false,
          },
          axisLabel: {
            rich: {
              red: {
                color: "#eb4c3d",
              },
            },
            // rotate: 30,
            color: currentThemeColor,
          },
          splitLine: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: currentThemeColor, //左边线的颜色
              width: "2", //坐标线的宽度
              // type: 'solid',
            },
          },
          z: 10,
        },
        visualMap: {
          show: false,
          min: 0,
          max: 3000,
          calculable: true,
          left: "-10%",
          bottom: "-10%",
          inRange: {
            color: ["#f5caca", "#f7b1b1", "#f58787", "#ee6666", "#f15555"],
          },
          // inRange: {
          //   color: [
          //     "#f4c2c2",
          //     "#ff0000"],
          // },
        },
        series: [
          {
            name: "交叉论文量",
            type: "heatmap",
            data: datas,
            left: "10%",
            label: {
              normal: {
                show: true,
                color: currentThemeColor,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(255, 255, 255, 0.8)",
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: "rgba(255, 255, 255, 0.5)",
              },
            },
          },
        ],
      };
      this.chart.clear();
      this.chart.setOption(option, true);

      this.$emit("chartDom", this.chart);

      // 后台报告下载
      this.chart.on("finished", () => {
        let tempId = this.$route.query.tempId;
        if (tempId) {
          this.getEchartImg(this.chart.getDataURL());
        }
      });
    },
    // 数据处理
    crossFIled(
      staticData,
      termStaticData,
      datas = [],
      datasb = [],
      datasc = [],
      cloumns = [],
      nodes = [],
      links = [],
      min = 100000,
      max = 0
    ) {
      // staticData.terms.map((item, index) => {
      //   // console.log("item: ", item, staticData.term_to_label);
      //   if (index < this.size) {
      //     let t = staticData.term_to_label?.[item.t] || item.t;
      //     this.checkList.forEach((b) => {
      //       if (t == b) {
      //         cloumns.push(t);
      //       }
      //     });
      //     // cloumns.push(staticData.term_to_label?.[item.t] || item.t);
      //   }
      // });
      // console.log(999, "termStaticData", termStaticData)
      termStaticData.map((item, index) => {
        // if (index < this.size) {
          let t = item.key;
          this.checkList.forEach((b) => {
            if (t == b.key) {
              cloumns.push(t);
            }
          });
        // }
      });
      let reversecloumn = cloumns;
      reversecloumn.reverse();
      termStaticData.map((term) => {
        if (term["co"]) {
          term.co.map((item) => {
            if (
              cloumns.indexOf(term.term) != -1 &&
              cloumns.indexOf(item.t) != -1
            ) {
              datas.push([
                cloumns.indexOf(term.term),
                reversecloumn.indexOf(item.t),
                item.n,
              ]);
            }
          });
        }
      });
      let datasRes = [];
      datas = datas.map(function(item) {
        let arr1 = [item[1], item[0], item[2] || "-"];
        let arr2 = [item[0], item[1], item[2] || "-"];
        datasRes.push(arr1, arr2);
        // return arr1;
      });

      return [datasRes, datasb, datasc, cloumns, nodes, links, min, max];
    },
    getEchartImg(base) {
      window.echartImg = base;
    },
  },

  destroyed() {
    this.chart.dispose();
    this.chart = null;
  },
};
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  // background-color: #fff;
  width: 100%;
  height: 600px;
}
</style>
